<template>
  <div v-loading="loading" class="product-status">
    <div class="fl">
      <ShopListMenu @emitShopId="emitShopId" />
    </div>

    <div v-if="shopId" class="left-container">
      <!-- 标题 tab  -->
      <div class="head">
        <AppMainTitle :title="shopName?shopName:''" />
        <div class="app-main-tips-box">
          <div class="title">
            <i class="el-icon-warning" /> 表格中的按钮为房型对应日期的房态，点击按钮可修改房态。
          </div>
        </div>
        <div class="tab">
          <el-tabs v-model="tabName" @tab-click="changeTabName">
            <el-tab-pane
              v-if="!$store.getters.banBtnList.includes('MCH_BTN_BK_FD_RESUORCE_SASTUS')"
              label="全日房"
              name="0"
            />
            <el-tab-pane
              v-if="!$store.getters.banBtnList.includes('MCH_BTN_BK_HR_RESUORCE_SASTUS')"
              label="钟点房"
              name="1"
            />
            <el-tab-pane
              v-if="!$store.getters.banBtnList.includes('MCH_BTN_BK_KTV_RESUORCE_SASTUS')"
              label="KTV"
              name="2"
            />
          </el-tabs>
        </div>
      </div>

      <div class="content app-main-content-box">
        <!-- 筛选 -->
        <div class="search-container">
          <el-input
            v-model="filterForm.productName"
            size="medium"
            style="margin-right:20px;width:300px"
            placeholder="请输入名称搜索"
            @keyup.enter.native="searchByKeyword"
          />
          <el-button
            type="primary"
            size="medium"
            round
            icon="el-icon-search"
            @click="searchByKeyword"
          >查 询</el-button>
        </div>

        <div class="search-container flexRBC">
          <el-button-group>
            <el-button
              type="primary"
              icon="el-icon-arrow-left"
              size="small"
              round
              :disabled="filterForm.beginDay===nowDate"
              @click="prevWeek"
            >前7天</el-button>
            <el-button
              size="small"
              type="primary"
              :disabled="filterForm.beginDay===nowDate"
              @click="toNow"
            >回到当前</el-button>
            <el-button type="primary" size="small" round @click="nextWeek">
              后7天
              <i class="el-icon-arrow-right el-icon--right" />
            </el-button>
          </el-button-group>
          <el-button
            size="small"
            type="primary"
            round
            :disabled="selectedProductList.length<=0"
            @click="openEditState"
          >批量调整</el-button>
        </div>

        <el-table
          :data="list"
          border
          stripe
          style="width: 100%"
          empty-text="暂无数据"
          @selection-change="handleSelectionChange"
        >
          <el-table-column type="selection" align="center" label="全选" width="50" />
          <el-table-column align="center" prop="productName" label="房型" min-width="200px">
            <template slot-scope="scope">
              <div class="app-text-color-primary product-name">{{ scope.row.productName }}</div>
              <div v-if="scope.row.productType===1||scope.row.productType===2">
                <div
                  v-if="scope.row.periodStartTime||scope.row.periodEndTime"
                >可用：{{ scope.row.periodStartTime|minsToHourMins }}~{{ scope.row.periodEndTime|minsToHourMins }}</div>
                <div v-else>可用：00:00~24:00</div>
                <div>时长：{{ scope.row.periodDuration/60 }}小时</div>
              </div>
            </template>
          </el-table-column>
          <el-table-column v-for="(item,index) in 7" :key="index" align="center" min-width="100px">
            <template slot="header">
              <span class="flexCCC">
                <span>{{ weekOptions[index].week }}</span>
                <span>{{ weekOptions[index].date }}</span>
              </span>
            </template>
            <template slot-scope="scope">
              <el-button
                :type="stateOptions[scope.row.stateList[index]].type"
                plain
                :disabled="scope.row.stateList[index]===2"
                size="small"
                style="padding: 9px 15px;"
                @click="changeState(scope.row,index)"
              >{{ stateOptions[scope.row.stateList[index]].label }}</el-button>
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页 -->
        <pagination-direction
          v-if="paginationConfig.total!==0"
          :config="paginationConfig"
          @sizeschange="sizesChange"
          @pagechange="pageChange"
        />
      </div>
    </div>

    <!-- 弹框更新状态 -->
    <DialogEditState ref="editState" />
  </div>
</template>

<script>
import { getProcuctStatusList, modifyProductState } from '../../api/product'
import DialogEditState from './components/DialogEditProductState'
export default {
  components: {
    DialogEditState
  },
  data() {
    return {
      // 配置
      paginationConfig: {
        direction: 'center', // 分页位置
        layout: 'total, sizes, prev, pager, next, jumper', // 分页类型
        pageSizes: [10, 20], // 分页pages
        total: 1,
        page: 1, // 页数-默认1
        pageSize: 10 // 每页条数-默认10
      },
      weekOptions: [], // 7天日期 周几 几号
      stateOptions: {
        0: {
          type: 'danger',
          label: '满房'
        },
        1: {
          type: 'success',
          label: '有房'
        },
        2: {
          type: 'info',
          label: '不可订'
        }
      },
      // 状态
      loading: false,
      // 数据
      tabName: '0',
      nowDate: '',
      shopId: '',
      shopName: '',
      list: [],
      selectedProductList: [], // 勾选资源
      filterForm: {
        beginDay: '',
        endDay: '',
        productName: '',
        productType: ''
      }
    }
  },
  mounted() {
    if (
      !this.$store.getters.banBtnList.includes('MCH_BTN_BK_FD_RESUORCE_SASTUS')
    ) {
      this.tabName = '0'
    } else if (
      !this.$store.getters.banBtnList.includes('MCH_BTN_BK_HR_RESUORCE_SASTUS')
    ) {
      this.tabName = '1'
    } else if (
      !this.$store.getters.banBtnList.includes('MCH_BTN_BK_KTV_RESUORCE_SASTUS')
    ) {
      this.tabName = '2'
    }
  },
  methods: {
    /**
       * 获取数据
       */
    // 获取列表
    initData(
      page = this.paginationConfig.page,
      pageSize = this.paginationConfig.pageSize
    ) {
      // 加入params
      this.filterForm.pageNum = page
      this.filterForm.pageSize = pageSize
      this.filterForm.shopId = this.shopId
      this.filterForm.productType = this.tabName
      const params = Object.assign({ shopId: this.shopId }, this.filterForm)
      // 清除多余字段
      for (const key in params) {
        if (params[key] === '' || params[key] === 'all') {
          delete params[key]
        }
      }
      this.loading = true
      getProcuctStatusList(params)
        .then(res => {
          this.list = res.data.list
          this.paginationConfig.total = res.data.total
          this.paginationConfig.page = res.data.pageNum
        })
        .catch(() => {})
        .finally(() => {
          this.loading = false
        })
    },

    // 分页sizes改变
    sizesChange() {
      this.initData()
    },

    // 分页page改变
    pageChange() {
      this.initData()
    },

    /**
       * 按钮组
       */
    //  切换tab
    changeTabName() {
      this.selectedProductList = []
      this.initData(1)
    },

    // 查询
    searchByKeyword() {
      this.initData(1)
    },

    // 回到现在
    toNow() {
      this.nowDate = this.$momentMini().format('YYYY-MM-DD')
      this.getCustomWeekList(this.nowDate)
    },

    // 上周
    prevWeek() {
      this.getCustomWeekList(
        this.$momentMini(this.filterForm.beginDay)
          .subtract(7, 'days')
          .format('YYYY-MM-DD')
      )
    },

    // 下周
    nextWeek() {
      this.getCustomWeekList(
        this.$momentMini(this.filterForm.beginDay)
          .add(7, 'days')
          .format('YYYY-MM-DD')
      )
    },

    // 获取日期列表
    getCustomWeekList(beginDate) {
      const weekName = ['周日', '周一', '周二', '周三', '周四', '周五', '周六']
      const weekList = []
      for (let i = 0; i < 7; i++) {
        const obj = {
          week:
              weekName[
                this.$momentMini(beginDate)
                  .add(i, 'days')
                  .format('d')
              ],
          date: this.$momentMini(beginDate)
            .add(i, 'days')
            .format('YYYY-MM-DD')
        }
        weekList.push(obj)
      }
      this.filterForm.beginDay = weekList[0].date
      this.filterForm.endDay = weekList[6].date
      this.weekOptions = weekList
      this.initData(1)
    },

    // table select选择
    handleSelectionChange(val) {
      this.selectedProductList = val
    },

    // 打开批量编辑
    openEditState() {
      this.$refs.editState
        .open({ shopId: this.shopId, productList: this.selectedProductList })
        .then(res => {
          this.initData()
        })
    },

    // 更新状态
    changeState(row, index) {
      const params = {
        days: [
          this.$momentMini(this.weekOptions[index].date).format('YYYYMMDD')
        ],
        productIds: [row.productId],
        shopId: this.shopId,
        state: row.stateList[index] ? 0 : 1
      }
      this.loading = true
      modifyProductState(params)
        .then(res => {
          row.stateList.splice(index, 1, params.state)
          this.$notify({
            title: '成功',
            message: '更新成功',
            type: 'success',
            duration: 1000,
            offset: 40
          })
        })
        .catch(() => {})
        .finally(() => {
          this.loading = false
        })
    },

    // 选中门店
    emitShopId(item) {
      this.shopId = item.shopId
      this.shopName = item.shopName
      this.toNow()
    }
  }
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
  .product-status {
    /* 左边 */
    .left-container {
      overflow: hidden;
    }
    /*  头部 */
    .head {
      padding: 24px 30px 0;
      border-radius: 5px;
      background-color: #fff;
      /* tab */
      .tab ::v-deep {
        .el-tabs__header {
          margin-bottom: 0;
          background-color: #fff;
          border-radius: 0 0 5px 5px;
        }
        .el-tabs__nav-wrap::after {
          background-color: #fff;
        }
        .el-tabs__active-bar {
          height: 4px;
        }
      }
    }

    /* 内容 */
    .content {
      margin-top: 10px;
      /* 搜索 */
      .search-container {
        margin-bottom: 20px;
      }
      .product-name {
        font-weight: bold;
      }
    }
  }
</style>
